<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>我是a页面</h1>
    <button class="btn1">点我跳转b页面</button>
    <button class="btn2">点我前进一个历史记录</button>
    <button class="btn3">点我go一个页面</button>
    <script>
      //和浏览器历史记录有关操作
      //操作浏览器的历史记录 前提是 :  浏览器有历史记录
      var btn1 = document.querySelector(".btn1");
      btn1.onclick = function () {
        window.location.href = "./b.html";
      };

      //js里所有操作 浏览器历史记录有关的内容  在window.history对象里面
      //1.查看浏览器历史记录的页面个数  window.history.length
      console.log(window.history.length);

      //2.前进一个历史记录: window.history.forward()
      var btn2 = document.querySelector(".btn2");
      btn2.onclick = function () {
        window.history.forward();
      };

      //3.后退一个历史记录: window.history.back()

      //4.前进或者回退到指定的历史记录  window.history.go()
      //go函数里面可以接受 数字参数
      //第一种: 正数 => 前进历史记录的个数
      //第二种: 0==> 跳转当前页面
      //第三种: 负数 => 回退历史记录的个数

      var btn3 = document.querySelector(".btn3");
      btn3.onclick = function () {
        //window.history.go(0);//刷新
        window.history.go(2);
      };
    </script>
  </body>
</html>
